<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        有关滤镜的一些方法：
        filter:blur() grayscale() drop-shadow();
            背景模糊(像素) 灰度设置（0-1） 投影（shadow值）

        其中：
        blur 可以用于毛玻璃设置
        grayscale 可以用于整个页面的灰度设置
        drop-shadow 可以用于不规则图形的投影
    -->


    <style>
        /* 染色方法一 ———— filter滤镜 */
        .box1{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            overflow: hidden;
            /* 通过filter方法将多个滤镜组合起来 */
            /* 降饱和度（黄色） 提升饱和度（暖金色） 偏移色相 */
            filter: sepia(1) saturate(4) hue-rotate(295deg);
            transition: .5s;
        }
        .box1>img{
            width: 100%;
        }
        .box1:hover{
            filter: none;
        }

        /* 染色方法二 ———— 混合模式 */
        .box2{
            margin-top: 30px;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            overflow: hidden;
            /* 外部容器设置吸取颜色 */
            background-color: hsl(335, 100%, 50%);
            transition: .5s;
        }
        .box2>img{
            width: 100%;
            /* 内部图片向下混合颜色 */
            mix-blend-mode: luminosity;
        }
        .box2:hover{
            background-color: transparent;
        }

    </style>





</head> 
<body>
    <div class="box1">
        <img src="./img/1.png" alt="">
    </div>
    <div class="box2">
        <img src="./img/1.png" alt="">
    </div>
</body>
</html>